import React, {PureComponent} from "react"
import "./index.less"
import {QqOutlined, UserAddOutlined, WechatOutlined} from '@ant-design/icons';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Button, Tabs} from "antd";
import loginCompose, {LoginType} from "./compose"

import PasswordLoginForm from "./components/password-login"
import SmsLoginForm from "./components/sms-login"
import cs from "classnames"
import "animate.css"
import AvatarLoader from "libs/avatar-loader"

import ZhiFu from "../../shared/libs/zhifu"

const form = Form.create()
const TabPane = Tabs.TabPane


export default @loginCompose
@form
class Login extends PureComponent {

  render() {
    const {
      _submitting
      , _setSubmitting
      , _loginType
      , changeLoginType
      , $avatar
      , avatar
      , toRegister
      , activeKey
      , onActiveKeyChange
      , onForgetPassword
      , wxLoading
      , $wxLoading
      , qqLoading
      , $qqLoading
    } = this.props

    const context = {_submitting, _setSubmitting}
    return (
      <div className={'ld2-login-page'}>
        <ZhiFu/>
        <div className={'ld2-login-page-bg'}>
        </div>

        <div className={'ld2-login-page-mark'}/>
        <Button size={'large'}
                style={{width: '180px', display: 'none'}}
                type="primary"
                ghost={true}
                onClick={toRegister}
                className="ld2-register">
          <UserAddOutlined/> 新用户注册
        </Button>

        <div className={cs('ld2-login-box', 'animated', {
          'hidden': _loginType !== LoginType.ACCOUNT,
          'fadeIn': _loginType === LoginType.ACCOUNT,
        })}>
          <div className={'ld2-caption'}>
            蓝迪智能裁缝
          </div>

          {/*头像*/}
          <div className={'ld2-avatar'}>
            <AvatarLoader style={{
              width: 104,
              height: 104
            }} src={`${avatar}`}/>
          </div>

          <Tabs activeKey={activeKey} onChange={onActiveKeyChange}>
            <TabPane tab="帐号密码登录" key="1">
              <PasswordLoginForm setAvatar={(avatar) => $avatar(avatar)}
                                 onForgetPassword={onForgetPassword}
                                 {...context}/>
            </TabPane>

            <TabPane tab="手机验证码登录" key="2">
              <SmsLoginForm setAvatar={(avatar) => $avatar(avatar)} {...context}/>
            </TabPane>
          </Tabs>

          <div className={'no-account'}>
            <a className="login-form-forgot" onClick={toRegister}>没有帐号? 现在注册</a>
          </div>

          <div className={'ld2-other-login'}>
            <div>其它方式登录</div>
            <div className={'icon-box'}>
              <div className={'login-icon qq'} onClick={changeLoginType(LoginType.QQ)}>
                <QqOutlined/>
              </div>

              <div className={'login-icon wx'} onClick={changeLoginType(LoginType.WX)}>
                <WechatOutlined/>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}